<template>
    <view class="wrap-subsection">
        <!-- <u-subsection :list="list" mode="subsection" :current="currentPage" @change="changePages"
            fontSize="16"></u-subsection> -->
        <u-sticky bgColor="#fff">
            <u-tabs :list="list" @click="changePages" :current="current" :activeStyle="{ color: '#000'}" :inactiveStyle="{ color: '#000' }" ></u-tabs>
        </u-sticky>
        <view class="subsectionPages">
            <view class="container">
                <view class="missionShow">
                    <view class="showText" v-for="(item, index) in Tlist">
                        <view>
                            {{ index + 1 }}.{{ item.work }}
                            <u-line color="#2979ff"></u-line>
                        </view>
                    </view>
                </view>
                <view class="salary">
                    <view class="space"> </view>
                    <view class="workTime">
                        <view class="showText">
                            工作时长：
                            <text>49h</text>
                        </view>
                        <view class="showText">
                            金额：
                            <text>{{ this.Tlist.length * 100 }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            list: [{
                name: '12月',
            }, {
                name: '11月',
            }, {
                name: '10月'
            }, {
                name: '9月'
            }, {
                name: '8月'
            }, {
                name: '7月'
            }, {
                name: '6月'
            }, {
                name: '5月'
            }, {
                name: '4月'
            }, {
                name: '3月'
            }, {
                name: '2月'
            }, {
                name: '1月'
            }],
            current: 0,
            Tlist: [
                { "work": "提供健康的膳食" },
                { "work": "管理和提醒用药" },
                { "work": "安排并陪同就医" },
                { "work": "协助进行日常运动" },
                { "work": "维护个人卫生" },
                { "work": "监测健康状况" },
                { "work": "保持住所的清洁和安全" },
                { "work": "提供交流和社交活动" },
                { "work": "协助处理财务事务" },
                { "work": "进行记忆力和认知功能训练" },
                { "work": "协助穿衣和洗澡" },
                { "work": "确保充足的休息和睡眠" },
                { "work": "提供情感支持和鼓励" },
                { "work": "协助穿衣和洗澡" },
                { "work": "确保充足的休息和睡眠" },
                { "work": "提供情感支持和鼓励" },
            ],
            missionList1: [
                { "work": "提供健康的膳食" },
                { "work": "管理和提醒用药" },
                { "work": "安排并陪同就医" },
                { "work": "协助进行日常运动" },
                { "work": "维护个人卫生" },
                { "work": "监测健康状况" },
                { "work": "保持住所的清洁和安全" },
                { "work": "提供交流和社交活动" },
                { "work": "协助处理财务事务" },
                { "work": "进行记忆力和认知功能训练" },
                { "work": "协助穿衣和洗澡" },
                { "work": "确保充足的休息和睡眠" },
                { "work": "提供情感支持和鼓励" },
                { "work": "协助穿衣和洗澡" },
                { "work": "确保充足的休息和睡眠" },
                { "work": "提供情感支持和鼓励" },
            ],
            missionList2: [
                { "work": "安排和陪同进行户外活动" },
                { "work": "监控和管理慢性病" },
                { "work": "保持住所的清洁和安全" },
                { "work": "提供交流和社交活动" },
                { "work": "协助处理财务事务" },
                { "work": "进行记忆力和认知功能训练" },
                { "work": "协助穿衣和洗澡" },
                { "work": "确保充足的休息和睡眠" },
                { "work": "提供情感支持和鼓励" },
            ]
        }
    },
    methods: {
        changePages(item) {
            this.current = item.index
            if (item.index == 0) {
                this.Tlist = this.missionList1
            } else if (item.index == 1) {
                this.Tlist = this.missionList2
            }
        }
    },
}
</script>

<style lang="scss">
page {
    background-color: #fff;
    height: 100vh;
}

.wrap-subsection {

    padding: 3% 0%;

    .subsectionPages {
        padding: 3% 3%;

        .container {
            display: flex;
            flex-direction: column;
            height: auto;
            box-shadow: 0 0 20px 5px #ccc;

        }


        .missionShow {
            flex-direction: row;
            flex-wrap: nowrap;
            border-bottom: 1px solid #2979ff;
            padding: 1%;
        }

        .showText {
            font-size: large;
            font-weight: 600;
            margin: 3%;
        }

        .salary {
            display: flex;
            height: 10vh;

            .space,
            .workTime {
                flex: 1;
                text-align: right;
            }
        }
    }
}
</style>